In Svelte, the class: directive allows you to conditionally add or remove CSS classes on an element based on a boolean expression. It provides a reactive and declarative way to toggle classes without manually manipulating classList.
You prefix the class name with class: and assign a boolean expression. If the expression evaluates to true, the class is added; if false, it is removed.
You can apply multiple class: directives to a single element for different conditions.
Use
class:for conditional class toggling instead of manually updatingclassName.Combine with reactive variables to automatically update styles when state changes.
Multiple
class:directives can be applied on the same element for different conditions.You can still use static class names alongside
class:directives.